<!-- 直播间item -->
<template>
	<view class="background_white" style="margin: 0 24rpx;margin-top: 16rpx;border-radius: 4rpx;width:702rpx;box-shadow: 0 4rpx 16rpx 0 0rpx 4rpx 16rpx 0rpx rgba(209, 211, 217, 0.16);" @click="click_live_base_item">
		<view style="height: 20rpx;"/>
		<!-- 直播基地 -->
		<view class="flex_row" style="padding: 0 24rpx;">
			<image :src="live.base_url" style="height: 72rpx;width: 72rpx;" class="circle"/>
			<!-- <fl_image :src="live.base_url" height="72" width="72" circle :compress="false"/> -->
			<view style="width: 20rpx;"/>
			<view class="flex_col flex">
				<view style="font-size: 30rpx;color: black;">{{live.base_name}}</view>
				<view class="flex_row baseline">
					<view style="font-size: 20rpx;color: #8D9090;margin-top: 2rpx;">{{live.base_location + " · 直播场数" + live.base_live_count + "场"}}</view>
					<view class="flex"/>
					<view style="font-size: 16rpx;color: black;">¥</view>
					<view style="font-size: 24rpx;color: black;">{{live.min_price + " ~ " + live.max_price}}</view>
				</view>
			</view>
		</view>
		<view class="flex_row" style="margin: 0 20rpx;margin-top: 20rpx;">
			<view v-for="item,index in live.pictures.slice(0,3)" :key="index">
				<image mode="aspectFill" :src="item" style="height: 210rpx;width: 210rpx;margin-right: 16rpx;border-radius: 10rpx;"/>
				<!-- <fl_image :src="item" height="210" width="210" style="margin-left: 16rpx;"></fl_image> -->
			</view>
		</view>
		<view v-if="tags.length != 0" class="flex_row" style="margin: 0 20rpx;margin-top: 10rpx;margin-left: 20rpx;">
			<view v-for="item,index in tags" :key="index">
				<view style="margin-right: 20rpx;font-size: 20rpx;color: #00C2C4;background-color:#E8F7F7;padding: 2rpx 8rpx;border-radius: 4rpx;">{{item}}</view>
			</view>
		</view>
		<view style="height: 20rpx;"/>
	</view>
</template>

<script>
	import {is_empty_string} from "../../utils/utils.js"
	import fl_image from "../fl_image.vue"
	export default {
		components: {
			fl_image,
		},
		name: "live_base_item",
		data() {
			return {
				tags:[]
			};
		},
		created() {
			
		},
		watch:{
			live(new_val){
				this.live = new_val
				this.init();
			}
		},
		methods: {
			
			click_live_base_item() {
				this.$emit("click_live_item",this.live)
			},
			init(){
				this.tags = this.live.style_tags.filter(e=>{
					return !is_empty_string(e)
				})
				console.log(this.tags)
			}
		},
		mounted() {

		},
		created(){
			// console.log(this.live)
			this.init();
		},
		props: {
			live: {
				type: Object,
				default: null
			}
		}
	}
</script>

<style>
	

	.gridient_back {
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
	}
</style>
